<template>
  <div>
    <detail-banner :bannerImg="bannerImg" :gallaryImgs="gallaryImgs" :sightName="sightName"/>
    <detail-Header/>
    <detail-list class="detail-list" :list="list"/>
  </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import axios from 'axios'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },
  data () {
    return {
      bannerImg: '',
      sightName: '',
      gallaryImgs: [],
      list: []
    }
  },
  created () {
    this.getDetaliInfo()
  },
  methods: {
    getDetaliInfo () {
      axios.get('/api/detail.json', {
        params: {
          id: this.$route.params.id
        }
      }).then(({data}) => {
        const res = data.data
        this.bannerImg = res.bannerImg
        this.gallaryImgs = res.gallaryImgs
        this.sightName = res.sightName
        this.list = res.categoryList
        console.log(data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-list{
  height: 100rem;
}
</style>
